<!DOCTYPE html>
<html>
<head>
<title>MUsgo Vive la Musica</title>

<link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'estructuraFondo.css')}" />
<link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'grid.css')}" />
<link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'formularioNick.css')}" />
<g:javascript src="jquery-1.8.2.js" />
<script type="text/javascript">
$(function(){
	$('a').click(function(){
         
		$('#form_container22').show(3000);

		});
});
function mostrarLogin(){
	
	$('#login_invisible').show(1500);
	$('#registropass_invisible').hide(1500);	
}
function mostrarRegistro(){
	
	$('#registropass_invisible').show(1500);
	$('#login_invisible').hide(1500);
}

</script>

</head>
<body>
    <div id="wrapper">
        <div id="headerwrap">
        <div id="header">
           
            <g:img dir="images/imgProyecto" file="b.PNG" />
        </div>
        </div>
        <div id="navigationwrap">
        <div id="navigation">
            <p>This is the Menu</p>
        </div>
        </div>
        <div id="leftcolumnwrap">
        <div id="leftcolumn">
        
        <div id="button-box">
    		<br><br>
    		<a href="#" class="button" onclick="mostrarLogin()">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; LOGIN &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>
    	</div>
    	
    	<div id="button-box">
    		<br><br>
    		<a href="#" class="button" onclick="mostrarRegistro()">REGISTRARSE</a>	
    	</div>
        
        
        <br><br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
        </div>
        </div>
        <div id="contentwrap">
        <div id="content">
        
        <img id="top" src="/musgoV1/images/imgProyecto/top.png" alt="">
 <!-- ----------------------------------------------------------------------------------------------- -->       
		
		<div id="login_invisible"> <!-- formulario login -->
	
		<h1><a>Untitled Form</a></h1>
		<form id="form_log" class="appnitro"  method="post" action="Login">
			<div class="form_description">
			<h2>Login Musgo </h2>
			<p>Bienvenido a Musgo !! Disfruta nuestros servicios.</p>
		</div>						
			<ul >
			
		<li id="li_1" >
		<label class="description" for="element_1">Nick </label>
		<div>
			<input id="element_1" name="nick" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Password </label>
		<div>
			<input id="element_2" name="password"  type="password" maxlength="100" value=""/> 
		</div> 
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="log" />
			    
				<g:actionSubmit value="Entrar" action="login"/>
		</li>
			</ul>
		</form>	
		
	</div><!-- formulario login-->
	
<!-- ---------------------------------------------------------------------------------------------------- -->
	<div id="registropass_invisible"> <!-- formulario registro nick pass -->
	
		<h1><a>Untitled Form</a></h1>
		<form id="form_registro" class="appnitro"  method="post" action="registro">
			<div class="form_description">
			<h2>REGISTRO MUSGO </h2>
			<p>Ingresa los datos requeridos, unete y disfrutar de nuestros servicios!  </p>
		</div>						
			<ul >
			
		<li id="li_1" >
		<label class="description" for="element_1">Nick </label>
		<div>
			<input id="element_1" name="nick" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>Tamaño del nick de 5 a 40 caracteres</small></p>
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Password </label>
		<div>
			<input id="element_2" name="pass"  type="password" maxlength="100" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>Tamaño del password de 5 a 40 caracteres</small></p>
		</li>		<li id="li_3" >
		<label class="description" for="element_3">Nombre del Artista o Grupo </label>
		<div>
			<input id="element_3" name="nombre" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_4" >
		<label class="description" for="element_4">Email </label>
		<div>
			<input id="element_4" name="email" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>email@abcd.com</small></p>
		</li>		<li id="li_5" >
		<label class="description" for="element_5">Pais </label>
		<div>
			<input id="element_5" name="pais" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_6" >
		<label class="description" for="element_6">Ciudad </label>
		<div>
			<input id="element_6" name="ciudad" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_7" >
		<label class="description" for="element_7">Historia </label>
		<div>
			<textarea id="element_7" name="historia" class="element textarea small"></textarea> 
		</div> 
		</li>		<li id="li_8" >
		<label class="description" for="element_8">Integrantes </label>
		<div>
			<textarea id="element_8" name="integrantes" class="element textarea small"></textarea> 
		</div> 
		</li>		<li id="li_9" >
		<label class="description" for="element_9">Foto </label>
		<div>
			<input id="element_9" name="foto" class="element file" type="file"/> 
		</div>  
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="registro" />
			    
				<g:actionSubmit value="Registrar" action="registro" />
		</li>
			</ul>
		</form>	
		
	</div><!-- formulario registro nick pass-->


	
	
	
	
	<img id="bottom" src="/musgoV1/images/imgProyecto/bottom501.png" alt="">		
	 	
		
	 
        
           </div>
        </div>
        <div id="footerwrap">
        <div id="footer">
            <p>This is the Footer</p>
        </div>
        </div>
    </div>
</body>
</html>